<!-- public/view/room.html -->
<div class="section" style="position: relative;">
    <h2>🎮 游戏房间: <span id="current-room-id"></span></h2>
    <div id="room-message-area" class="message-area">正在等待其他玩家...</div>

    <div id="game-selection-section">
        <h3>选择游戏开始</h3>
        <select id="in-room-game-select">
            <option value="loveletter">情书</option>
            <option value="geistes">闪灵快手</option>
            <option value="tic_tac_toe">井字棋</option>
        </select>
        <button id="start-game-btn">开始游戏</button>
    </div>

    <button id="rejoin-game-btn" style="display: none; margin: 10px 0;">重返游戏</button>
    
    <h3>当前玩家</h3>
    <ul id="player-list"></ul>
    
    <div class="room-actions">
        <div id="help-section" style="margin-top: 10px;">
            <h3 style="text-align: center;">桌游墙</h3>
            <div id="help-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; align-items: start;">
                <!-- 闪灵快手 卡片 -->
                <div class="help-item" style="display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; background: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);">
                    <img src="/images/geistes/box.png" alt="闪灵快手" style="width: 100%; max-width: 120px; aspect-ratio: 1 / 1; object-fit: contain;">
                    <button class="help-button help-game-btn" data-game="geistes" style="width: 100%;">📖 闪灵快手</button>
                </div>
                <!-- 新游戏：复制上方块并修改图片与 data-game、文字即可 -->
            </div>
        </div>
        <div style="position: absolute; right: 20px; bottom: 20px; z-index: 1000;">
            <button id="leave-room-btn">离开房间</button>
        </div>
    </div>
    </div>
</div>